<!-- START panel-->
<div class="panel" style="padding:20px;padding-bottom:0">
	<div class="panel-body">
		<div class="col-lg-2 col-xs-6">
			<p class="head-p">人员分组</p>

			<p class="btn-group btn-group-md" style="margin-bottom:20px" >
				<button type="button" class="btn btn-default" (click)="showEditGroup('new')" [disabled]="groupInfo.chnlLevel!=='1'">
					<span class="glyphicon glyphicon-plus"></span>
				</button>
				<button type="button" class="btn btn-default" (click)="showEditGroup('edit')" [disabled]="groupInfo.chnlLevel!=='1'">
					<span class="glyphicon glyphicon-pencil"></span>
				</button>
				<button type="button" class="btn btn-default" (click)="deleteGroup()" [disabled]="groupInfo.chnlLevel!=='1'">
					<span class="glyphicon glyphicon-minus"></span>
				</button>
			</p>
			<div style="overflow:auto;height:400px">
				<ul class="list-group" #chnlLists>
					<li class="list-group-item active li-hover" [id]="chnlGroupInfo.chnl.chnlId" (click)="chnlSelect($event.target)">
						<b class="glyphicon glyphicon-chevron-down indent abc"></b> {{chnlGroupInfo.chnl.chnlName}}
					</li>
					<div [hidden]="!groupInfo.isOpen">
						<li *ngFor="let groupMsg of chnlGroupInfo.chnlChilds;let i=index" class="list-group-item child-indent li-hover" [id]="groupMsg.chnlId"
						 (click)="chnlSelect($event.target)">
							<!--<span class="glyphicon glyphicon-star-empty indent"></span>-->
							{{groupMsg.chnlName}}
						</li>
					</div>
				</ul>
			</div>
		</div>
		<div class="col-lg-10">
			<p class="head-p">人员管理</p>
			<div class="row">
				<div class="col-lg-2 col-xs-6">
					<button class="btn btn-default btn-block btn-color" (click)="showEditAccount('new')">添加</button>
				</div>
				<div class="col-lg-2 col-xs-6">
					<button class="btn btn-default btn-block btn-color" (click)="showEditAccount('edit')">编辑</button>
				</div>
				<div class="col-lg-2 col-xs-6">
					<button class="btn btn-default btn-block btn-color" (click)="activateAccount('activate')">激活</button>
				</div>
				<div class="col-lg-2 col-xs-6">
					<button class="btn btn-default btn-block btn-color" (click)="activateAccount('frozen')">冻结</button>
				</div>
				<div class="col-lg-2 col-xs-6">
					<button class="btn btn-default btn-block btn-color" (click)="destoryAccount()">删除</button>
				</div>
				<div class="col-lg-2 col-xs-6">
					<button class="btn btn-default btn-block btn-color" (click)="resetPwd()">重置密码</button>
				</div>
			</div>
			<div style="border-top:2px solid #E3F7FC;width:100%;margin:20px auto"></div>
			<!-- START table-responsive-->
			<div class="table-responsive" style="min-height:350px">
				<table class="table  table-hover table-striped">
					<thead>
						<tr>
							<th checkAll>
								<div class="checkbox c-checkbox" *ngIf="tabledatas.childAccountInfo.length>0">
									<label>
										<input type="checkbox" />
										<span class="fa fa-check"></span>
                            		</label>
								</div>
							</th>
							<th>账号</th>
							<th>名称</th>
							<th>邮箱</th>
							<th>手机</th>
							<th>角色</th>
							<th>状态</th>
						</tr>
					</thead>
					<tbody #accountInput>
						<tr *ngFor="let accountList of tabledatas.childAccountInfo">
							<td>
								<div class="checkbox c-checkbox">
									<label>
                                <input type="checkbox" name="account" [id]="accountList.userId" [value]="accountList.account"/>
                                <span class="fa fa-check"></span>
                            </label>
								</div>
							</td>
							<td>{{accountList.account}}</td>
							<td>{{accountList.name}}</td>
							<td>{{accountList.email}}</td>
							<td>{{accountList.mobile}}</td>
							<td>{{accountList.userTypeName}}</td>
							<td [class]="accountList.state==='1'?'text-danger':'text-muted'">{{accountList.stateName}}</td>
						</tr>
					</tbody>
				</table>
			</div>
			<!--分页-->
			<div class="text-right">
				<pagination *ngIf="config.paging" class="pagination-sm" [(ngModel)]="config.page" [totalItems]="tabledatas.tableInfo.length" [itemsPerPage]="config.itemsPerPage"
				 [maxSize]="config.maxSize" [boundaryLinks]="true" [rotate]="false" (pageChanged)="pageChanged($event)"
				 (numPages)="numPages = $event" [firstText]="config.firstText" [previousText]="config.previousText" [nextText]="config.nextText"
				 [lastText]="config.lastText">
				</pagination>
			</div>
		</div>
	</div>
</div>

<!-- modal start -->
<div class="modal fade" bsModal #editGroupModal="bs-modal" [config]="{backdrop: false}" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"
 aria-hidden="true">
	<div class="modal-dialog modal-md">
		<div class="modal-content modal-content-mark">
			<div class="modal-header">
				<button type="button" class="close" aria-label="Close" (click)="editGroupModal.hide();">
                    <span aria-hidden="true">&times;</span>
                </button>
				<h4 class="modal-title">{{displayMsg.header}}</h4>
			</div>
			<div class="modal-body">
				<div>
					<form class="form-horizontal" (ngSubmit)="groupInfo.newOrEdit==='new'?createGroup():editGroups()" #editGroup="ngForm">
						<div class="form-group">
							<label for="groupName" class="col-sm-4 control-label">分组名称:</label>
							<div class="col-sm-6">
								<input type="text" class="form-control" [(ngModel)]="groupInfo.groupName" #nodeAccount="ngModel" name="groupName" required
								maxLength="10" placeholder="请输入分组名称!">
							</div>
						</div>
						<div class="form-group">
							<label for="chnlName" class="col-sm-4 control-label">上级组织:</label>
							<div class="col-sm-6">
								<input type="text" class="form-control" name="chnlName" [(ngModel)]="groupInfo.chnlName" disabled>
							</div>
						</div>
						<div class="form-group text-right">
							<div class="col-sm-offset-6 col-sm-2">
								<button class="mb-sm btn btn-primary btn-outline" type="button" (click)="editGroupModal.hide()">取消</button>
							</div>
							<div class="col-sm-2">
								<button class="mb-sm btn btn-primary btn-outline" [disabled]="!editGroup.form.valid" type="submit">{{displayMsg.confirmBtn}}</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- modal end -->
<!-- modal start -->
<div class="modal fade" bsModal #editAccountModal="bs-modal" [config]="{backdrop: false}" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"
 aria-hidden="true">
	<div class="modal-dialog modal-md">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" aria-label="Close" (click)="editAccountModal.hide()">
                    <span aria-hidden="true">&times;</span>
                </button>
				<h4 class="modal-title">{{displayMsg.header}}</h4>
			</div>
			<div class="modal-body">
				<form class="form-horizontal" (ngSubmit)="editAccount(editAccountInfo.newOrEdit)" #accountSubmit="ngForm">
					<div class="form-group" *ngIf="editAccountInfo.newOrEdit === 'edit'">
						<label for="accTopGroup" class="col-sm-4 control-label">所属客户:</label>
						<div class="col-md-6">
							<input type="text" class="form-control" [(ngModel)]="editAccountInfo.topGroup" name="accTopGroup" disabled>
						</div>
					</div>
					<div class="form-group" [hidden]="editAccountInfo.newOrEdit === 'new'">
						<label for="accGroup" class="col-sm-4 control-label">所属分组:</label>
						<div class="col-sm-6">
							<ng-select name="accGroup" #accGroup [(ngModel)]="editAccountInfo.group" placeholder="--选择分组--" [required]="editAccountInfo.newOrEdit === 'edit'">
							</ng-select>
						</div>
					</div>
					<div class="form-group">
						<label for="accAccount" class="col-sm-4 control-label">账号:</label>
						<div class="col-sm-6">
							<input type="text" class="form-control" [(ngModel)]="editAccountInfo.account" name="accAccount" required placeholder="账号仅限字母、数字及下划线!"
							 [disabled]="editAccountInfo.newOrEdit === 'edit'" (blur)="existAccount(editAccountInfo.account)"
							 maxLength="32" (keyup)="editAccountInfo.account=this.regularType('account', $event.target.value)">
							<h5  class="text-info" style="margin-top:15px;margin-bottom:0">默认密码为：账号+123！@#</h5>
							<h5 [hidden]=regularForm.account class="text-danger" style="margin-top:15px;margin-bottom:0">账号已存在!</h5>
						</div>
					</div>
					<div class="form-group">
						<label for="accName" class="col-sm-4 control-label">姓名:</label>
						<div class="col-sm-6">
							<input type="text" class="form-control" [(ngModel)]="editAccountInfo.name" name="accName" maxLength="12" required placeholder="请输入姓名!">
						</div>
					</div>
					<div class="form-group">
						<label for="accEmail" class="col-sm-4 control-label">邮箱:</label>
						<div class="col-sm-6">
							<input type="text" class="form-control" (input)="regularInput('accEmail')" [(ngModel)]="editAccountInfo.email" name="accEmail"
							 #accEmail required placeholder="请输入正确可用的邮箱!">
							<h5 [hidden]=regularForm.email class="text-danger" style="margin-top:15px;margin-bottom:0">邮箱格式错误!</h5>
						</div>
					</div>
					<div class="form-group">
						<label for="accMobile" class="col-sm-4 control-label">手机:</label>
						<div class="col-sm-6">
							<input type="text" class="form-control" [(ngModel)]="editAccountInfo.mobile" name="accMobile" placeholder="请输入手机号码!"
							maxLength="20" (keyup)="editAccountInfo.mobile=this.regularType('accMobile', $event.target.value)" required>
						</div>
					</div>
					<div class="form-group">
						<label for="accTelephone" class="col-sm-4 control-label">电话:</label>
						<div class="col-sm-6">
							<input type="text" class="form-control" [(ngModel)]="editAccountInfo.telephone" name="accTelephone" placeholder="请输入电话号码!"
							maxLength="20" (keyup)="editAccountInfo.telephone=this.regularType('accMobile', $event.target.value)" >
						</div>
					</div>
					<div class="form-group">
						<label for="accRemark" class="col-sm-4 control-label">备注:</label>
						<div class="col-sm-6">
							<input type="text" class="form-control" [(ngModel)]="editAccountInfo.remark" name="accRemark" maxLength="200">
						</div>
					</div>
					<div class="form-group">
						<label for="accUserType" class="col-sm-4 control-label">权限:</label>
						<div class="col-md-6">
							<ng-select [(ngModel)]="editAccountInfo.userType" #accUserType name="accUserType" placeholder="--选择权限--" [required]="true" [disabled]="groupInfo.chnlLevel!=='1'">
							</ng-select>
						</div>
					</div>
					<div class="form-group text-right">
						<div class="col-sm-offset-6 col-sm-2">
							<button class="mb-sm btn btn-primary btn-outline" type="button" (click)="editAccountModal.hide()">取消</button>
						</div>
						<div class="col-sm-2">
							<button class="mb-sm btn btn-primary btn-outline" [disabled]="!(accountSubmit.form.valid&&regularForm.email&&regularForm.account)" type="submit">{{displayMsg.confirmBtn}}</button>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>
<!-- modal end -->